{% extends "base.html" %}
{% block title %}MDL常量{% endblock %}
{% block head %}
    <link rel="stylesheet" href="static/plugins/datatables/dataTables.bootstrap.css">
    <script src="static/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="static/plugins/datatables/dataTables.bootstrap.min.js"></script>
{% endblock %}
{% block contentheader %}数据编码{% endblock %}
{% block contentsmallheader %}省、市、行政区划、性别、归属地等{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-3">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title fa fa-database"> MDL库</h3>
                    <div class="box-tools">
                        <button type="button" class="btn btn-box-tool " data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body no-padding" style="display: block;">
                    <ul class="nav nav-pills nav-stacked" id="tbl_list">
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="box box-primary" id="tbl_detail">
                <div class="box-header">
                    <h3 class="box-title" id="current_tbl">Data Table With Full Features</h3>
                </div>
                <div class="box-body" id="table_container">

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        <b>手机归属地表</b>&nbsp;数据量过大，请添加过滤条件！
                    </h4>
                </div>
                <div class="modal-body">
                    <h6><b>* 不加筛选默认取库中前100条作为示例。</b></h6>
                    <div class="input-group">
                        <span class="input-group-addon ">&nbsp&nbsp&nbsp&nbsp&nbsp城市ID&nbsp&nbsp&nbsp&nbsp</span>
                        <input type="text" class="form-control" placeholder="1 (可先查询city表，查找城市id)" id="filter_cityid">
                        <span class="input-group-addon">“上海”填：1</span>
                    </div>
                    <div class="text-center"><b>or</b></div>
                    <div class="input-group">
                        <span class="input-group-addon">手机号前7位</span>
                        <input type="text" class="form-control" placeholder="1881796" id="filter_pre7_phone">
                        <span class="input-group-addon">&nbsp&nbsp&nbsp&nbsp&nbsp7位数字&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block script %}

    <script>
        function add_class() {
            $('#treeview2').addClass('active');
            $('#menu2').addClass('menu-open');
            $('#datamdl').addClass('active');
        }
        $("#tbl_detail").hide();
        var table_example = '<table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">'
        var table_container = $('#table_container');
        $.ajax({
            url: "/get_mdl_tbl", success: function (data) {
                for (var i = 0; i < data.data.length; i++) {
                    $("#tbl_list").append("<li  data-target='" + data.data[i][7] + "'><a href='#'><i class='fa fa-table'></i> " + data.data[i][7] + "<span class='label label-primary pull-right'>" + data.data[i][12] + "</span></a></li>")
                }
            }
        });
        $('ul#tbl_list').on('click', 'li', function () {
            $("#tbl_detail").hide();
            if ($(this).attr("data-target") == 'mobilephone_location')
                $('#myModal').modal();
            else {
                $.ajax({
                    data: {'tablename': $(this).attr("data-target")},
                    url: "/get_mdl_detail",
                    success: function (data) {
                        table_container.empty();
                        table_container.append(table_example);
                        $('#example1').DataTable({
                            data: data.data.dataset,
                            destroy: true,
                            columns: data.data.columns
                        });
                        $("#tbl_detail").show();
                    }
                });

            }
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
            $("#current_tbl").text($(this).attr("data-target") + "审计详情：");
        });
        $('#myModal').on('click', '.btn-primary', function () {
            $('#myModal').modal('hide');
            $.ajax({
                data: {
                    'tablename': 'mobilephone_location',
                    'cityid': $('#filter_cityid').val(),
                    'pre7_phone': $('#filter_pre7_phone').val()
                },
                url: "/get_mdl_detail",
                success: function (data) {
                    table_container.empty();
                    table_container.append(table_example);
                    $('#example1').DataTable({
                        data: data.data.dataset,
                        destroy: true,
                        columns: data.data.columns
                    });
                    $("#tbl_detail").show();
                }
            });

        });
        //    模态框位置
        function centerModals() {
            $('#myModal').each(function (i) {
                var $clone = $(this).clone().css('display', 'block').appendTo('body');
                var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2 - 200);
                top = top > 0 ? top : 0;
                $clone.remove();
                $(this).find('.modal-content').css("margin-top", top);
            });
        }
        $('#myModal').on('show.bs.modal', centerModals);
        $(window).on('resize', centerModals);
    </script>
{% endblock %}